<template>
    <UCarousel v-slot="{ item }" :items="banners" arrows :prev-icon="prevIcon" :next-icon="nextIcon" >
        <img class="banner" :src="item" width="100%" alt="能源监控">
    </UCarousel>
    <div>
        <h2 class="title text-4xl font-black text-center mt-20 mb-10">业务板块</h2>
        <div class="flex justify-center">
            <div class="bg-blue-100 w-120 p-8 rounded-md h-150 mr-8">
                <h3 class="text-3xl font-black mb-4 text-white">环境方向</h3>
                <p class="text-white text-xl leading-9">
                    ESD 静电管理：实时监控、数据报表、风险预警、智能工单环境监控：温湿度、尘埃粒子、落尘量等全面监控智能告警：声光报警、自动归档、可追溯管理数据可视化：大屏看板、趋势分析、数字化 BI
                </p>
                <nuxt-link to="/home">
                    <Icon class="text-4xl text-white" name="ic:baseline-arrow-right-alt" />
                </nuxt-link>
            </div>
            <div class="bg-blue-100 w-120 p-8 rounded-md h-150">
                <h3 class="text-3xl font-black mb-4 text-black">能源方向</h3>
                <p class="text-black text-xl leading-9">
                    能源监控：全方位采集电、水、气、冷等能耗数据节能管控：智能分析用能模式，优化用能策略能源报表：自动生成报表，助力企业能耗管理节能减耗：实时监测与精细化管理，推动绿色运营
                </p>
                <nuxt-link to="/home">
                    <Icon class="text-4xl" name="ic:baseline-arrow-right-alt" />
                </nuxt-link>
            </div>
        </div>

        <h2 class="title text-4xl font-black text-center mt-20 mb-10">企业文化</h2>
        <div class="flex justify-center">
            <div class="bg-blue-100 w-77 p-8 rounded-md h-50 mr-8">
                <h3 class="text-3xl font-black mb-4 text-white">愿景</h3>
                <p class="text-white text-xl leading-9">
                    汇聚菁华 成就未来
                </p>
            </div>
            <div class="bg-blue-100 w-77 p-8 rounded-md h-50 mr-8">
                <h3 class="text-3xl font-black mb-4 text-white">使命</h3>
                <p class="text-white text-xl leading-9">
                    万物互联 构建智能
                </p>
            </div>
            <div class="bg-blue-100 w-77 p-8 rounded-md h-50">
                <h3 class="text-3xl font-black mb-4 text-white">价值观</h3>
                <p class="text-white text-xl leading-9">
                    以客户为中心 以奋斗者为本
                </p>
            </div>
        </div>

        <h2 class="title text-4xl font-black text-center mt-20 mb-10">公司介绍</h2>
        <div class="flex justify-center">
            <div class="bg-blue-100 w-247 p-8 rounded-md h-150">
                <h3 class="text-3xl font-black mb-4 text-white">公司简介</h3>
                <p class="text-white text-xl leading-9">
                    深圳市汇聚物联科技有限公司成立于2019年，位于深圳龙华区，是一家从事于工业物联网、自动控制、计算机信息系统集成及软硬件研发、销售和服务的高新技术企业，致力于通过物联网和互联网技术赋能工业、商业、企业客户，加速客户企业数字化进程。
                </p>
                <p class="text-white text-xl leading-9">
                    深圳市汇聚物联科技有限公司专注于提供工业园区、工厂、商业综合体的数字化解决方案和能源运营;公司在企业数字化、企业能耗管理、节能减排等领域研发了多款产品并申请多项自主知识产权和技术发明专利。
                </p>
            </div>
        </div>

        <h2 class="title text-4xl font-black text-center mt-20 mb-10">合作客户</h2>
        <div class="m-auto w-247">
            <div class="flex justify-between">
                <UColorModeImage
                    :key="i"
                    v-for="(img,i) in items"
                    :light="img"
                    :dark="img"
                    :width="100"/>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
defineProps<{
    prevIcon?: string
    nextIcon?: string
}>()
const banners = [
    'https://picsum.photos/640/640?random=5',
]
// useHead({
//     title: 'My App',
//     meta: [
//         { name: 'description', content: 'My amazing site.' },
//     ],
//     script: [{ innerHTML: 'console.log(\'Hello world\')' }],
// })
useSeoMeta({
    title: 'My Amazing Site',
    ogTitle: 'My Amazing Site',
    description: 'This is my amazing site, let me tell you all about it.',
    ogDescription: 'This is my amazing site, let me tell you all about it.',
    ogImage: 'https://example.com/image.png',
    twitterCard: 'summary_large_image',
})
</script>
<style scoped>
.banner{
    height: 600px;
    overflow: hidden;
    object-fit: cover;
}
</style>
